<div>
<form [formGroup]="formModel" (ngSubmit)="onSearch()" novalidate >

  <div class="form-group" [class.has-error]="formModel.hasError('minlength','title')">
    <label for="productTitle">Nick Name</label>
    <input formControlName="title" type="text" id="productTitle" placeholder="Nick Name" class="form-control">
    <span class="help-block" [class.hidden]="!formModel.hasError('minlength','title')">
      At least 3 character!!!
    </span>
  </div>

   <div class="form-group" [class.has-error]="formModel.hasError('positiveNumber','price')">
    <label for="productTitle"> Commission</label>
    <input formControlName="price" type="number" id="productPrice" placeholder="Price" class="form-control">
     <span class="help-block" [class.hidden]="!formModel.hasError('positiveNumber','price')">
     No Positive!!!
    </span>
   </div>

  <div class="form-group">
    <label for="productCategory"> Superpower Category</label>
    <select formControlName="category" id="productCategory" class="form-control">
      <option value="-1"> All Categories</option>
      <option *ngFor="let category of categories" [value]="category">{{category}}</option>
    </select>
   </div>

    <div class="form-group">
      <button type="submit" class="btn btn-primary btn-block">Search</button>
    </div>

</form>
</div>